<!DOCTYPE html>
<html lang="en">
<head>
    <title>Leaflet</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="lib/leaflet.css" type="text/css">
    <link rel="stylesheet" href="style/admin.css" type="text/css">
    <script src="lib/leaflet.js"></script>
</head>
<body>
<div class="admin-nav">
    <span id="chinaSpan">全国</span>
    <span id="provinceSpan" style="display: none;"></span>
    <span id="citySpan" style="display: none;"></span>
    <span id="countySpan" style="display: none;"></span>
</div>
<div id="map" class="map"></div>
<script>
    const map = L.map('map', {
        preferCanvas: true
    }).setView([26.45090222367265, 114.43359375000001], 5);
    L.tileLayer('http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8').addTo(map);

    function getColor(){
        let colourstr="#"
        const coloruarr=["a","b","c","d","e","f","0","1","2","3","4","5","6","7","8","9"]
        for(let p=0;p<6;p++){
            const n=Math.floor(Math.random()*coloruarr.length+1)-1;
            colourstr+=coloruarr[n];
        }
        return colourstr;
    }

    let adminLayer = null
    let chinaSpan = document.getElementById('chinaSpan')
    let provinceSpan = document.getElementById('provinceSpan')
    let citySpan = document.getElementById('citySpan')
    let countySpan = document.getElementById('countySpan')

    chinaSpan.onclick = clickFunction
    provinceSpan.onclick = clickFunction
    citySpan.onclick = clickFunction

    function clickFunction() {
        const pcode = this.getAttribute('acode') || ''
        const level = this.getAttribute('level') || 'province'
        addAdminLayer(pcode, level)
    }

    addAdminLayer()

    /**
     *
     * @param pcode
     * @param level
     */
    function addAdminLayer(pcode = '', level = 'province') {
        switch (level) {
            case 'province': {
                provinceSpan.style.display = 'none'
                citySpan.style.display = 'none'
                countySpan.style.display = 'none'
                break;
            }
            case 'city': {
                provinceSpan.style.display = 'inline-block'
                citySpan.style.display = 'none'
                countySpan.style.display = 'none'
                break;
            }
            case 'county': {
                provinceSpan.style.display = 'inline-block'
                citySpan.style.display = 'inline-block'
                countySpan.style.display = 'none'
                break;
            }
        }
        fetch(`./data1/${level}.json`).then(res => res.json()).then(res => {
            if(adminLayer) adminLayer.remove()
            if(pcode) {
                res.features = res.features.filter(f => {
                    return f.properties.pcode === pcode
                })
            }
            adminLayer = L.geoJSON(res, {
                style: function res(feature) {
                    let option = {};
                    option.weight = 1;
                    option.fillColor = getColor();
                    option.fillOpacity = 0.7;
                    option.color = "rgba(255,255,255,0.65)";
                    return option;
                },
                onEachFeature: function (feature, layer) {
                    layer.on({
                        mouseover: ((e) => {
                            map.getContainer().style.cursor = 'pointer'
                        }),
                        mouseout: ((e) => {
                            map.getContainer().style.cursor = ''
                        }),
                        click: ((e) => {
                            const {code, name} = feature.properties
                            switch (level) {
                                case 'province': {
                                    provinceSpan.innerText = ` >> ` + name
                                    provinceSpan.setAttribute('acode', code)
                                    provinceSpan.setAttribute('level', 'city')
                                    addAdminLayer(code, 'city')
                                    break;
                                }
                                case 'city': {
                                    citySpan.innerText = ` >> ` + name
                                    citySpan.setAttribute('acode', code)
                                    citySpan.setAttribute('level', 'county')
                                    addAdminLayer(code, 'county')
                                    break;
                                }
                                case 'county': {
                                    countySpan.innerText = ` >> ` + name
                                    countySpan.setAttribute('acode', code)
                                    countySpan.style.display = 'inline-block'
                                    break;
                                }
                            }
                        })
                    });
                }
            });
            adminLayer.addTo(map)
            map.fitBounds(adminLayer.getBounds());
        })
    }
</script>
</body>
</html>